<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>无人机模拟飞行</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<!-- <script src='http://localhost:9000/examples/GiswayEngine.js'></script> -->
<!-- <script src='/GiswayEngine.js'></script> -->
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var cameraFov = 10; //相机视角
    var mapType = 'satellite'; //electronic
    window.app = new GE.App('mapContainer', {
        geographySystem: 'gcj02',
        //rjy_osgb_output数据  
        position: [118.76769049871781, 31.828401267358743, 3000],
        lookAt: [118.76769049871781, 31.828401267358743, 0],
        // position: [120.170646, 30.28362, 3000],
        // lookAt: [120.170646, 30.28362, 0],

        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        cameraFov: cameraFov, //相机的fov
        verticalLevel: 6,
        maxSlopeAngle: 70,

        ambientLightIntensity: 2,
        ambientLightcolor: 0xffffff,//环境光照的颜色
        ambientLightType: 'ambient',//环境光照的类型，有如下类型:ambient，hemisphere
        supportLightType: 'single',//方向光的类型，有如下类型:single，double，tripple
        supportLightIntensity: 1,//方向光的强度
        supportLightcolor: '#ffffff', //方向光的颜色
        lightDistance: 2000,//方向光源距离初始相机target的距离
        lightHeight: 50,//方向光源的高度

        // extraStep: 5,
        patchLoadCount: 7,
        useCarpet: true,
        background: "Fog",
        // backGroundColor: "#A9A9A9",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        isOpenCircleRange: true, //开启圆形范围可视化
        baseLayer: [
            {
                // url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                // url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', //高德的瓦片底图
                // url: 'http://webst03.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',
                url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                readableUrl: true,
                tileType: 'image', //图层的类型
                name: 'imageLayer', //图层的名字
                maxDataLevel: 18,
                colorSpace: 'srgb', //'', 
                isBackgroundLayer: true, //该图层是否作为地图的背景图层，一般背景图层都放在所有图层的最下面
            }
        ]
    });


    window.app.on('Click', function (e) {
        console.log(e.lnglat);
    });


    var threeTileModel;
    tiles3d(); //加载倾斜摄影数据
    function tiles3d() {
        threeTileModel = new GE.Tiles3d({
            // url: 'http://localhost:9009/examples/resources/osgb/rjy_osgb_output/tileset.json', refinement: 500, loadRange: 0,//rjy_osgb_output数据
            // url: 'http://192.168.50.155:9009/examples/resources/osgb/rjy_osgb_output/tileset.json', refinement: 500, loadRange: 0,//rjy_osgb_output数据
            url: 'https://gisdata.t-aaron.com/3dTiles/rjy/rjy_osgb_output/tileset.json', refinement: 6000, loadRange: 0,//rjy_osgb_output数据
            // url: 'http://localhost:9009/examples/resources/osgb/银杏湖/tileset.json', refinement: 100, loadRange: 0,//银杏湖数据
            z: -15, //调整数据的高度
            minSize: 500,
            maxSize: 3000,
            // minSize: 10,
            // maxSize: 50,
            maxBytesSize: 0.3 * 2 ** 10,
            minByteSize: 0.2 * 2 ** 10,
            screenErrorFactor: 1.5, //屏幕误差缩放的倍数
            isOpenAdditionalCamera: false, //是否添加预加载的额外相机
            additionCameraFov: cameraFov * 2, //额外相机的fov
            unloadPercent: 1,
            maxJobs: 15,
            canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            isSupportTransparent: false,
            isDoubleSide: false, //是否开启双面渲染
            // dracoGltfPath: 'http://localhost:9009/examples/resources/plugin/draco/gltf/', //draco压缩的gltf文件解压后存放的路径
            // dracoGltfPath: 'http://192.168.50.155:9009/examples/resources/plugin/draco/gltf/', //draco压缩的gltf文件解压后存放的路径
            dracoGltfPath: 'https://gisdata.t-aaron.com/3dTiles/rjy/draco/',
            isCloseGround: true, //是否贴近地面
            isReplaceMaterial: true,
            isComputeBox: true, //计算各个瓦片的包围盒
        });
        app.add(threeTileModel);
        window.tiles3d = threeTileModel;
    }



    var loadedModelCount = 0;
    var isHasdAircraftModel = false; //加载无人机模型是否成功
    var aircraftModel; //无人机模型
    var airportPosition = new GE.Point(118.77027900885972, 31.82784694165648, 22, 'gcj02'); //机场的位置
    // var simulatorInitPosition = new GE.Point(118.7704590898906, 31.827049029444524, 40, 'gcj02'); //无人机从机场升空到达的指定位置
    var simulatorInitPosition = new GE.Point(118.77027900885972, 31.82784694165648, 60, 'gcj02'); 
    function loadFbx(modelUrl, scale, isComputeBox) {
        var model = new GE.OverLay({
            type: 'fbx',
            url: modelUrl,
            scale: [scale, scale, scale],
            actionTimeScale: 10,
            isComputeBox: isComputeBox, //计算各个瓦片的包围盒
            success: function (modelScene) {
                loadedModelCount++;
                if (loadedModelCount >= 2) {
                    isHasdAircraftModel = true;

                    aircraftModel.visible = true;
                    const boundingBox = new GE.three.Box3();
                    // 递归计算对象A及其所有子对象的包围盒
                    boundingBox.setFromObject(aircraftModel);

                    // 获取包围盒尺寸
                    const size = new GE.three.Vector3();
                    boundingBox.getSize(size);

                    let maxSize = Math.max(size.x, size.y, size.z);
                    let targetSize = 2;
                    let scaleFactor = targetSize / maxSize;
                    aircraftModel.scale.set(scaleFactor, scaleFactor, scaleFactor);

                    setTimeout(() => {
                        wander(aircraftModel);
                    }, 1500);

                }
            }
        });
        return model;
    }

    function loadAircraftModel() {
        aircraftModel = loadFbx('/examples/resources/fbx/wurenji3.fbx', 1, true);
        aircraftModel.up.x = 0; aircraftModel.up.y = 0; aircraftModel.up.z = 1;  //提供模型的朝向信息，不然模型移动的时候可能会出现朝向错误
        aircraftModel.renderOrder = 4;
        let aircraftModelPosition = airportPosition.toEPSGWeb();
        aircraftModel.position.copy(aircraftModelPosition);
        aircraftModel.visible = false;
        app.add(aircraftModel);

        var directionModel = loadFbx('/examples/resources/fbx/direction1.fbx', 0.2, true);
        directionModel.position.y += 10;
        directionModel.position.z += 55;
        directionModel.rotateX(-Math.PI / 2);
        aircraftModel.add(directionModel);
    }
    loadAircraftModel(); //加载无人机模型




    let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(118.77017020344424, 31.82665686117461, 30.375527465785932, 'gcj02'),
        new GE.Point(118.77003841882818, 31.82704628052984, 30.375527465785932, 'gcj02'),
        new GE.Point(118.77088466769877, 31.82644871893714, 30.375527465785932, 'gcj02'),
        new GE.Point(118.77147564743453, 31.826762519717317, 30.375527465785932, 'gcj02')
    ];

    var simulator
    function wander(model) {//物体漫游的功能
        simulator = new GE.FlightSimulator(model, { collisionObjs: [threeTileModel], sidewipeDistance: 1.0, 
            flickerImg: "/examples/resources/image/lensflare0.png",   //无人机闪光时用到的图片
            startPoiImg: '../assets/img/start.png', //航线起点POI用到的图片
            endPoiImg: '../assets/img/ed.png', //航线终点POI用到的图片
            simulatorInitPosition: simulatorInitPosition, //无人机从机场升空到达的指定位置

            airportImg: "/examples/resources/image/airportBox.png", //机场POI的图片
            airportPosition: airportPosition,  //机场的位置

            backHeight: 120, //返航时的高度

            timeFactor: 50,  //无人机飞行的时间参数
        }); //模型漫游的功能，该功能对模型的朝向有要求：模型的正面需要Z轴朝上

        let path = new Array();//漫游的路径
        path.push({ objPosition: pointArray[0] });
        path.push({ objPosition: pointArray[1] });
        path.push({ objPosition: pointArray[2] });

        simulator.fly(path, 10000, function () { //漫游结束的回调事件
            console.log('the wander is over');

            window.app.mouse.addHoverObject(model); //为该模型添加鼠标悬停的功能

            // window.app.mouse.removeHoverObject(model); //为该模型移除鼠标悬停的功能
        })
    }

</script>

</html>